<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import type {
		FormInstance,
		TabsPaneContext,
	} from 'element-plus'
	import dayjs from 'dayjs'
	import GetCoupon from './getcoupon.vue'
	import GetUser from './getuser.vue'
	import marketApi from '@/api/zhitan/market.ts'

	const dialogVisible : any = ref(false)
	const formRef : any = ref()
	const formRules : any = ref({
		name: [{
			required: true,
			message: '请选择优惠券',
			trigger: 'blur',
		}],
		applet_user_name: [{
			required: true,
			message: '请选择小程序用户',
			trigger: 'blur',
		}],
	})
	const form : any = ref({})
	const total : any = ref(0)
	const showGetCoupon = ref(false)
	const showGetUser = ref(false)

	const loadingRef : any = ref(null)
	const paging : any = ref({
		page: 1,
		limit: 10,
	})

	const dataList : any = ref([])// 表格
	const topIndex : any = ref(1)
	const topList : any = ref([
		{
			id: 1,
			name: '余额明细',
			value: 1,
			num: 10,
		},
		{
			id: 2,
			name: '使用记录',
			value: 2,
			num: 19,
		},
		{
			id: 3,
			name: '提现记录',
			value: 3,
			num: 5,
		},
		{
			id: 4,
			name: '设置',
			value: 4,
		},
	])
	onMounted(() => {
		getList()
	})
	// 分页代码
	function pagChange(e : any) {
		paging.value = Object.assign(paging.value, e)
		getList()
	}

	function getList() {
		marketApi.CouponLog_list(paging.value).then((res : any) => {
			if (res.code === 0) {
				dataList.value = res.data
				total.value = res.count
			}
		})
	}
	function modify(row : any, type : any) {
		if (type === 1) {
			form.value = {
				status: 1,
				get_type: 1,
			}
		}
		else {
			form.value = JSON.parse(JSON.stringify(row))
		}
		dialogVisible.value = true
	}

	function removeBatch(row : any) {
		marketApi.CouponLog_delete({ id: row.id }).then((res : any) => {
			if (res.code === 0) {
				getList()
				dialogVisible.value = false
				ElMessage({
					type: 'success',
					message: '操作成功',
				})
			}
		})
	}
	function submitForm() {
		formRef.value && formRef.value.validate((valid : any) => {
			if (valid) {
				ElMessageBox.confirm(
					`确认提交?`,
					'提示',
					{
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						type: 'warning',
					},
				)
					.then(() => {
						form.value.get_type = 2
						if (form.value.aging_type === 1) {
							form.value.send_time = Math.floor(Date.now() / 1000)
							form.value.end_time = form.value.send_time + form.value.day * 86400
						}

						marketApi.CouponLog_edit(form.value).then((res : any) => {
							if (res.code === 0) {
								dialogVisible.value = false
								ElMessage({
									type: 'success',
									message: '操作成功',
								})
								form.value = {}
							}
						})
					})
					.catch(() => { })
			}
		})
	}
	function changedata(e : any) {
		form.value.name = e.name
		form.value.coupon_id = e.coupon_id
		form.value.image = e.image
		form.value.money = e.money
		form.value.type = e.type
		form.value.product_group_id = e.product_group_id
		form.value.product_id = e.product_id
		form.value.remark = e.remark
		form.value.aging_type = e.aging_type
		if (e.aging_type === 1) {
			form.value.day = e.day
		} else if (e.aging_type === 2) {
			form.value.send_time = e.start_time
			form.value.end_time = e.end_time
		}

		showGetCoupon.value = false
	}
	function changedatauser(e : any) {
		form.value.applet_user_name = e.nick_name
		form.value.applet_user_id = e.id
		showGetUser.value = false
	}
</script>

<template>
	<div class="absolute-container">
		<PageMain style="position: relative;">
			<el-form ref="formRef" :model="form" class="px-2" :rules="formRules" label-position="top"
				label-width="100px">
				<el-form-item label="关联优惠券：" prop="name">
					<div style="width:40%;" class="flex items-center">
						<el-input style="width:100%;" disabled v-model="form.name" size="large" placeholder="请添加关联优惠券"
							clearable />
						<el-button size="large" type="primary" plain class="cancel ml-4" @click="showGetCoupon = true">
							选择
						</el-button>
					</div>
				</el-form-item>
				<el-form-item label="关联用户：" prop="applet_user_name">
					<div style="width:40%;" class="flex items-center">
						<el-input style="width:100%;" disabled v-model="form.applet_user_name" size="large"
							placeholder="请添加关联用户" clearable />
						<el-button class="cancel ml-4" type="primary" plain size="large" @click="showGetUser = true">
							选择
						</el-button>
					</div>
				</el-form-item>

				<!-- <el-form-item label="获取途径：" prop="get_type">
					<el-radio-group v-model="form.get_type">
						<el-radio :value="1">
							新用户发放
						</el-radio>
						<el-radio :value="2">
							平台发放
						</el-radio>
						<el-radio :value="3">
							完成订单
						</el-radio>
						<el-radio :value="4">
							拼团
						</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<!-- <el-form-item label="分类状态：" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio :value="1">
							正常
						</el-radio>
						<el-radio :value="2">
							暂停
						</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<!-- <el-form-item label="排序：" prop="sort">
					<el-input-number v-model="form.sort" style="width: 100%;" size="large" placeholder="请输入排序号" :min="0"
						controls-position="right" />
				</el-form-item> -->
			</el-form>

			<div class="fotterbtn w-full flex justify-center">
				<!-- <el-button class="cancel" @click="dialogVisible = false, form = {} ">
					取消
				</el-button> -->
				<el-button type="primary" size="large" @click="submitForm">
					提交
				</el-button>
			</div>
		</PageMain>
		<GetCoupon v-if="showGetCoupon" v-model="showGetCoupon" @changedata="changedata($event)" />
		<GetUser v-if="showGetUser" v-model="showGetUser" @changedata="changedatauser($event)" />

	</div>
</template>

<style lang="scss" scoped>
	@import "@/assets/styles/tool";

	:deep(.guestBox .el-overlay-dialog) {
		background-color: rgb(255 255 255 / 80%);
	}

	:deep(.guestBox .el-dialog) {
		padding: 24px;
		border-radius: 10px;
	}

	:deep(.guestBox header) {
		padding-left: 16px;
		font-size: 16px;
		font-weight: 550;
		border-bottom: 1px solid #f2f2f2;
	}

	:deep(.guestBox .el-dialog__headerbtn .el-dialog__close) {
		font-size: 20px;
		color: #000;
	}

	.btnbox {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.btnbox>.el-button {
		font-size: 12px;
	}

	.downcol {
		.before\:bg-ui-primary::before {
			background-color: red;
		}

		.bg-ui-primary {
			background-color: red;
		}
	}
</style>